<template>
	<view class="container">
		<!-- 自定义状态栏 -->
		<custom-status-bar gradient-type="message"></custom-status-bar>
		
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="header-title">私信</text>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-container">
			<input 
				class="search-input" 
				placeholder="搜索联系人..." 
				v-model="searchKeyword"
			/>
			<button class="search-button" @click="handleSearch">搜索</button>
		</view>
		
		<!-- 联系人列表 -->
		<scroll-view class="contacts-list" scroll-y="true">
			<view 
				class="contact-item" 
				v-for="(contact, index) in filteredContacts" 
				:key="contact.id"
				@click="goToChat(contact, index)"
			>
				<view class="avatar-container">
					<image 
						:src="contact.avatar || '/static/default-avatar.png'" 
						class="avatar" 
						mode="aspectFill"
					/>
					<view class="unread-badge" v-if="contact.unreadCount > 0">
						<text class="unread-text">{{ contact.unreadCount > 99 ? '99+' : contact.unreadCount }}</text>
					</view>
				</view>
				
				<view class="contact-info">
					<view class="contact-header">
						<text class="contact-name">{{ contact.name }}</text>
						<text class="last-time">{{ contact.lastTime }}</text>
					</view>
					<view class="contact-footer">
						<text class="last-message">{{ contact.lastMessage }}</text>
						<view class="mute-icon" v-if="contact.isMuted">
							<text>🔇</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// #ifdef APP
	import customStatusBar from "@/components/custom-status-bar/custom-status-bar.vue";
	// #endif
	
	export default {
		// #ifdef APP
		components: {
			customStatusBar
		},
		// #endif
		data() {
			return {
				searchKeyword: '',
				contacts: [
					{
						id: 1,
						name: '张三',
						avatar: '/static/avatar1.jpg',
						lastMessage: '明天下午有空吗？',
						lastTime: '15:30',
						unreadCount: 2,
						isMuted: false
					},
					{
						id: 2,
						name: '李四',
						avatar: '/static/avatar2.jpg',
						lastMessage: '好的，我收到了',
						lastTime: '14:20',
						unreadCount: 0,
						isMuted: true
					},
					{
						id: 3,
						name: '用户xdg456',
						avatar: 'https://picsum.photos/id/237/200/200',
						lastMessage: '习近平法治思想概论5r要吗？',
						lastTime: '昨天',
						unreadCount: 1,
						isMuted: false
					},
					{
						id: 4,
						name: '甜白',
						avatar: 'https://picsum.photos/id/64/200/200',
						lastMessage: '思想道德与法治2r',
						lastTime: '星期一',
						unreadCount: 0,
						isMuted: false
					}
				]
			}
		},
		computed: {
			filteredContacts() {
				if (!this.searchKeyword) {
					return this.contacts;
				}
				return this.contacts.filter(contact => 
					contact.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
				);
			}
		},
		methods: {
			handleSearch() {
				// 搜索逻辑已经在 computed 中实现
				uni.showToast({
					title: '搜索完成',
					icon: 'success'
				});
			},
			goToChat(contact, index) {
				// 跳转到私聊页面
				uni.navigateTo({
					url: `/pages/chat/privateChat?contact=${encodeURIComponent(JSON.stringify(contact))}`
				});
				
				// 清除未读消息计数（红点消失）
				if (contact.unreadCount > 0) {
					this.$set(this.contacts[index], 'unreadCount', 0);
				}
			}
		}
	}
</script>

<style scoped>
page {
	background-color: #fff;
	min-height: 100%;
}
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	/* 添加渐变背景色 */
	background: linear-gradient(135deg, #CFDEF3 0%, #E0EAFC 100%);
	min-height: 100vh;
}

.header {
	height: 88rpx;
	background: linear-gradient(135deg, #E5E5BE 0%, #003973 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30rpx;
}

.header-title {
	color: #FFFFFF;
	font-size: 36rpx;
	font-weight: bold;
}

/* 搜索框样式 */
.search-container {
	display: flex;
	padding: 20rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}

.search-input {
	flex: 1;
	height: 70rpx;
	padding: 0 20rpx;
	background-color: #f5f5f5;
	border-radius: 35rpx;
	font-size: 28rpx;
}

.search-button {
	width: 120rpx;
	height: 70rpx;
	margin-left: 15rpx;
	background: linear-gradient(135deg, #E5E5BE 0%, #003973 100%);
	color: white;
	border-radius: 35rpx;
	font-size: 28rpx;
	font-weight: bold;
}

.contacts-list {
	flex: 1;
}

.contact-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}

.contact-item:last-child {
	border-bottom: none;
}

.avatar-container {
	position: relative;
	margin-right: 20rpx;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}

.unread-badge {
	position: absolute;
	top: -8rpx;
	right: -8rpx;
	background-color: #ff3b30;
	border-radius: 30rpx;
	min-width: 36rpx;
	height: 36rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8rpx;
}

.unread-text {
	color: #fff;
	font-size: 20rpx;
}

.contact-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100rpx;
}

.contact-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.contact-name {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.last-time {
	font-size: 24rpx;
	color: #999;
}

.contact-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.last-message {
	font-size: 28rpx;
	color: #666;
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mute-icon {
	margin-left: 10rpx;
}
</style>